<template>
  <div class="shop">
    <!-- 店面照片 -->
    <div class="shop-images">
        <img class="shop-img" :src="shopImage | qnImg(null, 200)">
    </div>
    <div class="information">
        <!-- 健身价格 -->
        <div class="shop-info">
            <div class="step-title">
                <div class="step-title-left">
                    <van-icon class="step-icon" name="exchange"/>
                    <label class="step-tip">健身价格</label>
                </div>
            </div>
            <div class="comment">{{健身价格}}</div>
        </div>
        <!-- 场地介绍 -->
        <!-- <div class="shop-info">
            <div class="step-title">
                <div class="step-title-left">
                    <van-icon class="step-icon" name="records"/>
                    <label class="step-tip">场地介绍</label>
                </div>
                <div v-show="shop.longitude && shop.latitude" @click="toMap" class="shop-map"><div>查看地图</div><van-icon class="step-icon" name="arrow" /></div>
            </div>
            <div class="comment">{{场地介绍}}</div>
        </div> -->
        <!-- 地址 -->
        <div class="shop-info">
            <div class="step-title">
                <div class="step-title-left">
                    <van-icon class="step-icon" name="location"/>
                    <label class="step-tip">地址</label>
                </div>
            </div>
            <div class="comment">{{地址}}</div>
        </div>
        <!-- 注意事项 -->
        <div class="shop-info">
            <div class="step-title">
                <div class="step-title-left">
                    <van-icon class="step-icon" name="warn"/>
                    <label class="step-tip">注意事项</label>
                </div>
            </div>
            <div class="comment">{{注意事项}}</div>
        </div>
        <!-- 健身房简介 -->
        <div class="shop-info">
            <div class="step-title">
                <div class="step-title-left">
                    <van-icon class="step-icon" name="records"/>
                    <label class="step-tip">健身房简介</label>
                </div>
            </div>
            <div class="course-detail" v-bind:class="{ border_radius: shop.images && shop.images.length==0 }">
                <div class="comment">
                    {{shop.description}}
                </div>
                <div class="course-tag">
                    <van-tag v-for="(item, index) in shop.tages" :key="index">{{item.name}}</van-tag>
                </div>
            </div>
            <div v-if="shop.images && shop.images.length>0" class="course-img">
                <img @click="viewImage" v-for="(item, index) in shop.images" :key="index" :src="item.url">
            </div>
        </div>
        <!-- 健身步骤 -->
        <div class="shop-info">
            <div class="step-title">
                <div class="step-title-left">
                    <van-icon class="step-icon" name="wap-nav"/>
                    <span class="step-tip">健身步骤</span>
                </div>
            </div>
            <van-steps class="course-step" direction="vertical">
                <van-step class="icons">
                    <div class="step-desc">预约付费成功</div>
                </van-step>
                <van-step class="icons">
                    <div class="step-desc">获得入场密码</div>
                </van-step>
                <van-step class="icons">
                    <div class="step-desc">门禁输入密码</div>
                </van-step>
                <van-step class="icons">
                    <div class="step-desc">验证成功入场上课</div>
                </van-step>
            </van-steps>
        </div>
    </div>
    <!-- 约课 -->
    <div class="course-appoint">
        <van-button @click="toAppointment" type="primary" bottom-action>立即约课</van-button>
    </div>
    <back :scroll="false"></back>
  </div>
</template>

<script>
import Wx from 'weixin-js-sdk'
import { ImagePreview } from 'vant'
import back from '../../components/base/back.vue'

export default {
  name: 'shop-detail',
  comments: 'shop-detail',
  components: {
    back
  },
  data () {
    return {
      thumb: './static/images/swiper1.jpg',
      shopImage: '',
      images: [],
      健身价格: '',
      地址: '',
      注意事项: '',
      场地介绍: '',
      shop: {}
    }
  },
  created () {
    this.getShopDetail()
  },
  methods: {
    toMap: function () {
      this.$router.push({
        name: 'shopMap',
        params: {
          latitude: this.shop.latitude,
          longitude: this.shop.longitude
        }
      })
    },
    // 预览图片
    viewImage (e) {
      ImagePreview(this.images)
    },
    // 预约到课程列表
    toAppointment () {
      this.$router.push({
        name: this.shop.type === 'person' ? 'coursePerson' : 'course'
      })
    },
    wxConfig (shop) {
      var that = this
      this.$axios.post('/wechat/share/config', {
        url: location.href.split('#')[0],
        redirect: location.href.split('?')[0],
        user_id: JSON.parse(localStorage.getItem('user')).id
      }).then(config => {
        const wxConfig = config.data

        Wx.config({
          debug: false,
          appId: wxConfig.appId,
          timestamp: wxConfig.timestamp,
          nonceStr: wxConfig.nonceStr,
          signature: wxConfig.signature,
          jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage']
        })

        Wx.ready(() => {
          // 分享到朋友圈
          Wx.onMenuShareTimeline({
            title: that.shop.name,
            link: wxConfig.shareURL,
            imgUrl: that.shop.preview.image,
            success: function () {
              // alert('分享成功！', this.course.preview.image);
            },
            cancel: function () {
              // alert('取消分享！');
            }
          })

          // 分享给朋友
          Wx.onMenuShareAppMessage({
            title: that.shop.name,
            desc: that.shop.description,
            link: wxConfig.shareURL,
            imgUrl: that.shop.preview.image,
            type: 'link',
            dataUrl: '',
            success: function () {
              // alert('分享成功！');
            },
            cancel: function () {
              // alert('取消分享！');
            }
          })
        })
      })
    },
    // 获取健身房详细
    getShopDetail: function () {
      var that = this
      this.$axios.get('/gyms/' + this.$router.currentRoute.params.shop_id).then(response => {
        that.shop = response.data
        that.shopImage = response.data.preview.image
        for (var j = 0; j < response.data.images.length; j++) {
          that.images.push(response.data.images[j].url)
        }
        for (var i = 0; i < response.data.content.length; i++) {
          that[response.data.content[i].title] = response.data.content[i].content
        }
        document.title = that.shop.name
        if (that.shop.status === 0) {
          that.$toast('暂未开业，请耐心等待！')
        }
        this.wxConfig(that.course)
      })
    }
  }
}
</script>
<style lang="postcss" scoped>
.icons{
    color: #cece28;
    text-align: left;
}
. icons span{
    color: white;
}
.icons>div{
    color: white;
}
.van-cell, .van-cell-group{
    background-color:transparent
}
.van-hairline--top-bottom::after{
    border-width: 0px 0;
}
.shop{
    margin-bottom: 50px;
}
.shop-wrap{
    margin-bottom: 50px;
}
.shop-images{
    overflow: hidden;
}
.course-video{
  width: 100%;
  height: auto;
}
.information{
    padding: 0px 5px 8px 5px;
    color: #f8f8f8;
}
.information div:first-child{
    margin-top: 0px;
}
.information>div{
    margin-top: 5px;
}
.shop-info{
    background-color: #3c3a3a;
    border-radius: 5px;
}
.shop-pic{
    width: 30%;
    min-height: 100px;
    float: left;
    display: inline;
}
.shop-img{
    height: 150px;
    width: 100%;
}
.comment{
    text-align: left;
    font-size: 0.8rem;
    text-indent: 2em;
    padding: 10px;
    line-height: 1rem;
    border-radius: 0px 0px 5px 5px;
    background-color: #3c3a3a;
}
.course-info-item{
    color: white;
    text-align: left;
}
.course-detail{
}
.course-tag{
    text-align: left;
    margin: 0px 10px;
}
.border_radius{
    border-radius: 0px 0px 5px 5px;
}
.course-img{
    width: auto;
    height: 100px;
    display: inline-flex;
    overflow-x: scroll;
    margin: 10px;
}
.course-img img{
    width: 49%;
    float: left;
    display: inline;
    margin-left: 2%;
}
.course-img img:first-child{
    margin-left: 0px;
}
.course-step{
    background-color: transparent;
}
.step-title {
    height: 1.4rem;
    line-height: 1.4rem;
    font-size: 1rem;
    text-align: left;
    color: #f8f8f8;
    padding: 5px 10px;
    position: relative;
    border-radius: 5px 5px 0px 0px;
    background-color: #333;
}
.step-title-left{
    display: flex;
    justify-content: center;
    float: left;
}
.shop-map{
    float: right;
    font-size: 0.8rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 1.4rem;
    line-height: 1.4rem;
}
.step-icon{
    color: yellow;
    align-self: center;
}
.step-tip{
    margin-left: 8px;
}
.step-desc{
    color: #f8f8f8;
}
.course-appoint{
    position: fixed;
    bottom: 0px;
    width: 100%;
    z-index: 999;
}
</style>
